import Vue from 'vue'
import Vuex from 'vuex'
import product_data from '../product'
Vue.use(Vuex)
// store变化与之绑定的页面也改变
export default new Vuex.Store({
  // vue每个组件从state读取数据
  // this.$store.state.count获取
  state: {
    //商品列表信息
    productList:[],
    cartList:[],
    //当前用户账号
    username: '',
    //登录状态    !!转换为bool值
    loginStatus: false,
  },
  // 维护state中派生的对象
  getters: {
  },
  //修改state
  // 在方法中this.$store.commit("mutation方法")
  mutations: {
    //初始化时，添加商品列表
    setProductList(state, data) {
      state.productList = data;
    },
    //添加商品到购物车
    addCart(state, obj) {
      const id = obj.id;
      //获取具体的product，以便修改其stocks库存
      let product = state.productList.find(item => item.id === id);
      if (obj.inCart) {
          //此商品在购物车中，数量+1，对应库存-1
          let Added = state.cartList.find(item => item.id === id);
          Added.pro_num++;
          product.stocks--;
      } else {
          //此商品不在购物车中，加入到购物车中
          state.cartList.push({
              'pro_name':product.pro_name,
              'pro_price':product.pro_price,
              'pro_img':product.pro_img,
              'pro_num':1,
          });
          //对应库存-1
          product.stocks--;
      }
  },
  //清空购物车即购买，无需恢复库存
  emptyCart(state) {
    state.cartList = [];
  },
  //username是commit来的用户名，修改state中用户名
  getUser(state, username) {
    state.username = username;
  },
  //flag是commit过来的登录状态，修改state中的状态
  getLoginStatus(state, flag) {
    state.loginStatus = flag;
  },
  quit(state){
    state.username='';
    state.loginStatus=false
  }
  },
  // 组件触发动作用户异步操作
  actions: {
    //ajax请求商品列表，暂且使用setTimeout模仿加载数据
    getProductList(context) {
      setTimeout(() => {
          //设置state.productList 为引入的product_data
          context.commit('setProductList', product_data)
      }, 500);
  },
  add(context, id) {
    //首先查看登录状态，若未登录则跳转到登陆界面
    // if (!context.state.loginStatus) {
    //     window.alert('请先登录，为您跳转到登录界面');
    //     //路由跳转
    //     window.location.href = '/login/login';
    //     return undefined
    // }
    //先查看购物车中是否有该商品
    const isAdded = context.state.cartList.find(item => item.id === id);
    //查看对应商品的库存
    const stocks = context.state.productList.find(item => item.id === id).stocks;
    return new Promise((resolve, reject) => {
        if (stocks) {//有库存，修改数据
            //如果购物车中不存在商品,设置count为1，存在count++
            if (isAdded) {
                context.commit('addCart', {
                    inCart: true,
                    id: id
                })
                resolve('加一')
            } else {
                context.commit('addCart', {
                    inCart: false,
                    id: id
                })
                resolve('加入购物车')
            }
        } else {
            //无库存，返回信息
            reject('库存不足')
        }
    })
},
buy(context) {
  //模拟ajax请求服务端响应后再清空购物车
  return new Promise(resolve => {
      setTimeout(() => {
          context.commit('emptyCart');
          resolve('购买成功');
      }, 500);
  });
},

  },
  modules: {
  }
})
